<!--
  ~ Copyright (c) 2020 the original author or authors
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      https://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  ~ or implied. See the License for the specific language governing
  ~ permissions and limitations under the License.
  -->

<div class="app-search">
  <ng-container *ngIf="title">
    <div class="app-search--title mat-title">{{ title }}</div>
  </ng-container>
  <div class="app-search--form">
    <input class="app-search--form_input mat-body-2" type="text" (input)="onInputChange($event)" [placeholder]="searchPlaceholder" />
    <mat-icon svgIcon="search"></mat-icon>
  </div>
  <ng-container *ngIf="currentRole as userRole">
    <div class="app-search--btn">
      <button mat-flat-button *ngIf="userRole !== requiredRole" (click)="onButtonChange($event)">
        <mat-icon svgIcon="add_new"></mat-icon>
        <span class="app-search--btn_text">{{ buttonText }}</span>
      </button>
    </div>
  </ng-container>
</div>
